<template>
  <div class="ratings" ref="ratings">
    <div>
        <div class="ratings-content">
             <div class="overview">
                 <div class="overview-left">
                     <h1 class="score">{{ seller.score }}</h1>
                     <div class="title">综合评分</div>
                     <div class="rank">高于周边商家{{ seller.rankRate }}%</div>
                 </div>
                 <div class="overview-right">
                     <div class="score-wrapper">
                         <div class="title">服务态度</div>
                         <star class="star" :size="36" :score="seller.serviceScore"></star>
                         <span class="score">{{ seller.score }}</span>
                     </div>
                     <div class="score-wrapper">
                         <span class="title">商品评分</span>
                         <star class="star" :size="36" :score="seller.foodScore"></star>
                         <span class="score">{{seller.foodScore}}</span>
                     </div>
                     <div class="delivery-wrapper">
                         <span class="title">送达时间</span>
                         <span class="delivery">{{seller.deliveryTime}}分钟</span>
                     </div>
                 </div>
             </div>
        </div>
        <split></split>
        <ratingselect
                :select-type = "selectType"
                :onlyContent = "onlyContent"
                :ratings = "ratings"
                 @selecttype="selecttype"
                  @content="content"
        ></ratingselect>
        <div class="rating-wrapper">
            <ul>
                <li v-for="(rating,index) in ratings" :key="index" class="rating-item border-lpx" v-show="needShow(rating.rateType,rating.text)">
                    <div class="avatar">
                        <img :src="rating.avatar" width="28" height="28" alt="">
                    </div>
                    <div class="content">
                        <h1 class="name">{{ rating.username }}</h1>
                        <div class="star-wrapper">
                            <star :size="24" :score="rating.score" ></star>
                            <span class="time" v-show="rating.deliveryTime">{{rating.deliveryTime}}分钟送达</span>
                        </div>
                        <p class="text">{{ rating.text }}</p>
                        <div class="recommend" v-show="rating.recommend">
                            <span class="icon-thumb_up iconfont iconzan1" v-show="rating.recommend && rating.recommend.length"></span>
                            <span v-for="item in rating.recommend" class="recommend-item">{{item}}</span>
                        </div>
                        <div class="rate-time">{{ rating.rateTime | formatDate }}</div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    </div>
</template>

<script>
    import BScroll from 'better-scroll';
    import axios from 'axios';
    import split from '../../components/split/split';
    import ratingselect from '../../components/ratingselect/ratingselect';
    import star from '../../components/star/star';
    import {formatDate} from "../../../js/date";

    const ALL = 2;

    export default {
        name: "ratings",
        data(){
            return{
                seller:{},
                showFlg:false,
                selectType:ALL,
                onlyContent:true,
                ratings:[],
            }
        },
        methods:{
            getDataInfo(){
                axios.get('/src/mock/appData')
                    .then( (res)=>{
                       res = res.data
                        if(res){
                        const data =res
                            this.seller =data.seller;
                            this.ratings = data.ratings;
                        }
                })
            },
            selecttype(type){
                      this.selectType=type
                       // 手动刷新better-scroll重新计算页面高度
                       this.$nextTick( ()=>{
                        this.ratingScroll.refresh()
                       } )
            },
            content(){
              this.onlyContent = ! this.onlyContent
               this.$nextTick( ()=>{
                        this.ratingScroll.refresh()
                       } )
            },
            needShow(type,text){
           if(this.onlyContent && !text){
            return false
           }
           if(this.selectType == ALL){
            return true
           }else{
            return type == this.selectType
           }
            }
        },
        created(){
          this.getDataInfo()
        },
       mounted(){
          this.$nextTick( ()=>{
        if(!this.ratingScroll){
            this.ratingScroll = new BScroll(this.$refs.ratings,{
              click:true
            })
        }else{
          this.ratingScroll.refresh()
        }
          })
        },
        components:{
            star,
            split,
            ratingselect,
      },
        filters:{
            formatDate(time){
                    let date = new Date(time);
                    return formatDate(date,'yyyy-MM-dd hh-mm');
            }
        }
    }
</script>

<style lang="stylus" scoped>
  @import "~../../stylus/index.styl"
  

      .ratings
        position:absolute
        top:174px
        bottom:0
        left:0
        width:100%
        overflow:hidden
        .overview
         display:flex
         padding:18px 0
         .overview-left
          padding:6px 0
          flex: 0 0 137px
          width:137px
          border-right: 1px solid rgba(7,17,27,0.1)
          text-align:center
          @media only screen and (max-width:320px)
            flex: 0 0 120px
            width:120px
          .score
           margin-bottom:6px
           line-height:28px
           font-size:24px
           color:rgb(255,153,0)
          .title
           margin-bottom:16px
           line-height:12px
           font-size:12px
           color:rgb(7,17,27)
          .rank
           padding-bottom:6px
           line-height:1px
           font-size:   10px
           color:rgb(147,153,159)
         .overview-right
           flex:1
           padding:6px 0 6px 24px
           @media only screen and (max-width:320px)
             padding-left:6px
           .score-wrapper
             margin-bottom: 8px
             line-height: 18px
             font-size:0
            .title
              display:inline-block
              font-size:12px
              vertical-align:top
              color:rgb(7,17,27)
            .star
              display:inline-block
              margin: 0 12px
              vertical-align:top
            .score
             display:inline-block
             vertical-align:top
             font-size:12px
             color:rgb(255,153,0)
          .delivery-wrapper
           font-size:0
           .title
            line-height:12px
            font-size:12px
            color:rgb(7,17,27)
           .delivery
            display: inline-block
            margin-left: 12px
            font-size:12px
            color:rgb(147,153,159)
        .rating-wrapper
         padding: 0 18px
         .rating-item
          display:flex
          padding: 18px 0
          border-1px(rgba(7,17,27,.1))
          .avatar
            flex:0 0 28px
            width:28px
            margin-right:12px
            img
             border-radius:50%
          .content
            position:relative
            flex:1
            .name
             margin-bottom:4px
             line-height:12px
             font-size:10px
             color:rgb(7,17,27)
            .star-wrapper
              margin-bottom:6px
              font-size:0
              .star
               display:inline-block
               margin-right:6px
               vertical-aling:top   
              .time
               font-size: 10px
               font-weight: 200
               line-height: 12px
               color: rgb(147,153,159)
             .text
               font-size: 12px
               line-height: 18px
               color: rgb(7,17,27)
               margin-bottom: 8px
             .recommend
               font-size: 0
              .icon-thumb_up
                display: inline-block
                font-size: 12px
                color: rgb(0,160,220)
                line-height: 16px
              .recommend-item
                display: inline-block
                padding: 0 6px
                font-size: 9px
                line-height: 16px
                color: rgb(147,153,159)
                border: 1px solid rgba(7,17,27,.1)
                margin: 0 0 4px 8px
           .rate-time
            position: absolute
            right: 18px
            top: 18px
            font-size: 10px
            line-height: 12px
            color: rgb(147,153,159)


</style>